<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>期末作业</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.12/fullpage.css"
      integrity="sha512-c2/xySTiUmIa2PzQAnKZVYi2+aJmyaI6rweK5GCL1HbHx70/Zub0RhYPy5RFbJsStRo+HTForawyFBgBp6btJA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
    />

    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css
    "
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>

    <style>
      #section1 {
        background-image: url(姜文1.jpeg);
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #section1 h1 {
        text-align: center;
        color: rgb(235, 228, 228);
      }
      #myVideo {
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-color: black; /* in case the video doesn't fit the whole page*/
        background-image: /* our video */ ;
        background-position: center center;
        background-size: contain;
        object-fit: cover; /*cover video background */
        z-index: 3;
      }

      /* Layer with position absolute in order to have it over the video
 * --------------------------------------- */
      #section2 .layer {
        position: absolute;
        z-index: 4;
        width: 100%;
        left: 0;
        top: 43%;

        /*
  * Preventing flicker on some browsers
  * See http://stackoverflow.com/a/36671466/1081396  or issue #183
  */
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
      .layer h1 {
        color: rgb(241, 235, 235);
        text-align: center;
        font-size: 72px;
        background-color: #6299d895;
        line-height: 2;
      }
      .list-unstyled {
        list-style: none;
      }
      #myMenu {
        position: fixed;
        right: 40px;
        top: 20%;
        z-index: 999;
      }
      #myMenu a {
        color: rgb(17, 17, 17);
        text-decoration: none;
        line-height: 2;
      }
      #section3 .container {
        padding-top: 180px;
      }
    </style>
  </head>
  <body>
    <ul id="myMenu" class="list-unstyled">
      <li data-menuanchor="firstpage" class="active">
        <a href=" ">首页</a >
      </li>
      <li data-menuanchor="secondpage">
        <a href="#secondpage">姓名</a >
      </li>
      <li data-menuanchor="thirdpage">
        <a href="#thirdpage">姜文与电影</a >
      </li>
      <li data-menuanchor="fourthpage">
        <a href="#fourthpage">姜文访谈</a >
      </li>
    </ul>
    <div id="fullpage">
      <div class="section" id="section1">
        <h1>姜文与电影</h1>
      </div>
      <div class="section" id="section2">
        <video id="myVideo" loop muted data-autoplay playsinline>
          <source
            src="
          https://oss-yangjh.oss-cn-chengdu.aliyuncs.com/video/flowers.mp4"
            type="video/mp4"
          />
        </video>

        <style>
          #section3 {
            background-image: url(背景1.webp);
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          </style>

        <div class="layer">
          <h1>左梦、程关双期末作业</h1>
        </div>
      </div>
      <div class="section" id="section3">
        <div class="container">
          <h3 class="my-5 text-center">姜文与电影</h3>
          <div class="row">
            <div class="col-md-6">
              <div
                id="carouselExampleControls"
                class="carousel slide"
                data-bs-ride="carousel"
              >
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img
                      src="姜文3.jpeg"
                      class="d-block w-100"
                    />
                  </div>
                  <div class="carousel-item">
                    <img
                      src="姜文4.jpeg"
                      class="d-block w-100"
                      alt="..."
                    />
                  </div>
                </div>
                <button
                  class="carousel-control-prev"
                  type="button"
                  data-bs-target="#carouselExampleControls"
                  data-bs-slide="prev"
                >
                  <span
                    class="carousel-control-prev-icon"
                    aria-hidden="true"
                  ></span>
                  <span class="visually-hidden">Previous</span>
                </button>
                <button
                  class="carousel-control-next"
                  type="button"
                  data-bs-target="#carouselExampleControls"
                  data-bs-slide="next"
                >
                  <span
                    class="carousel-control-next-icon"
                    aria-hidden="true"
                  ></span>
                  <span class="visually-hidden">Next</span>
                </button>
              </div>
            </div>
            <div 
            style="color: aliceblue;"
            class="col-md-6">1987年，凭借电影《芙蓉镇》获得第10届大众电影百花奖最佳男演员奖。
              1989年，凭借电影《春桃》获得第12届大众电影百花奖最佳男主角奖。1994年，凭借电视剧《北京人在纽约》获得第12届中国电视金鹰奖最佳男主角奖。 
              1998年，凭借电影《宋家皇朝》获得第17届香港电影金像奖最佳男配角奖 。作为导演的姜文亦获得较多肯定。自编自导的处女作《阳光灿烂的日子》被
              《时代周刊》评为“九五年度全世界十大最佳电影”之首，凭借该片夺得第33届台湾电影金马奖最佳导演奖 。2000年，凭借执导的电影《鬼子来了》
              获得第53届戛纳国际电影节评审团大奖。2010年末上映的贺岁电影《让子弹飞》刷新了国产电影的多项票房纪录，凭借该片获得中国电影导演协会2011年度
              表彰大会年度导演奖、第48届台湾电影金马奖最佳改编剧本奖、第11届华语电影传媒大奖最佳导演奖。 2014年，获得第17届上海国际电影节华语电影杰出贡献奖。
              2017年，美国电影艺术与科学学院正式宣布姜文成为“2017年奥斯卡”新成员。2018年3月，出任第21届上海国际电影节金爵奖评委会主竞赛单元主席；
              同年其执导的电影《邪不压正》入围第55届台湾电影金马奖六项提名。2020年，获得“亚洲卓别林电影人士艺术成就奖”。</div>
          </div>
        </div>
      </div>
      <div class="section" id="section3">
        <div class="container">
          <h3 class="my-5 text-center">姜文访谈</h3>
          <div class="row">
            <div class="col-md-6">
              <div
                id="carouselExampleControls"
                class="carousel slide"
                data-bs-ride="carousel"
              >
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img
                      src="姜文2.jpeg"
                      class="d-block w-100"
                    />
                  </div>
                  <div class="carousel-item">
                    <img
                      src="姜文5.webp"
                      class="d-block w-100"
                      alt="..."
                    />
                  </div>
                </div>
                <button
                  class="carousel-control-prev"
                  type="button"
                  data-bs-target="#carouselExampleControls"
                  data-bs-slide="prev"
                >
                  <span
                    class="carousel-control-prev-icon"
                    aria-hidden="true"
                  ></span>
                  <span class="visually-hidden">Previous</span>
                </button>
                <button
                  class="carousel-control-next"
                  type="button"
                  data-bs-target="#carouselExampleControls"
                  data-bs-slide="next"
                >
                  <span
                    class="carousel-control-next-icon"
                    aria-hidden="true"
                  ></span>
                  <span class="visually-hidden">Next</span>
                </button>
              </div>
            </div>
            <div 
            style="color: rgb(240, 245, 245);"
            class="col-md-6">谁是国内最好的导演？恐怕很难分出伯仲。但问「谁是国内最自恋的导演」，答案就会出奇地一致:
              姜文。他在采访中谈到最欣赏的三位导演：谢飞，谢晋，还有一个是他自己。可姜文的底气就在这里，哪怕自恋到近乎自负的程度，也没人不服。
              当我们说一位导演自恋，往往是针对他的作品。姜文迄今为止拍了六部长片。其实，每一部都在拍他自己。处女作《阳光灿烂的日子》，拍的是青春期的大院往事。
              该片入围了当年的威尼斯电影节主竞赛单元。 被《时代周刊》评为「年度世界十大电影」之首。 如此高的起点，给了姜文足够的底气。
              《太阳》之后，姜文似乎憋着一股劲。既然观众说看不懂，那他非要拍一个所有人都能明白的故事。于是就有了2010年的《让子弹飞》。
              这是一部烙印满了姜文印记的电影:荷尔蒙气息，黑色幽默，浪漫主义。
              也最大程度上满足了姜文的英雄情结——一名落草为寇的土匪，既有侠义精神，又有市侩的痞气。</div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.12/fullpage.min.js"
      integrity="sha512-2N6afhHcaOPaBztibhzvEp9MBtXoG+6YQ5AkllMJKHrZKUUiHHmIc1bEafMDjG+LnTtSIYjaKdg2BdZqqZkkBQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      $(document).ready(function () {
        //initialising fullpage.js in the jQuery way
        $("#fullpage").fullpage({
          anchors: ["firstpage", "secondpage", "thirdpage", "forthpage"],
          menu: "#myMenu",
          verticalCentered: false,
          credits: null,
          //   afterRender: function () {
          //     var pluginContainer = this;
          //     alert("DOM结构已完成");
          //   },
          afterLoad: function (origin, destination, direction, trigger) {
            console.log(origin, destination, direction, trigger);
            if (destination.anchor == "firstpage") {
              $("#myMenu").hide();
            } else {
              $("#myMenu").show();
            }
            if (destination.anchor == "secondpage") {
              $("#myMenu a").css({ color: "white" });
            } else {
              $("#myMenu a").css({ color: "black" });
            }
          },
        });
      });
    </script>
  </body>
</html>